.message-item{
	display: flex;
	flex-direction: column;
	margin-bottom: 32rpx;
	position: relative;
	.message-time{
		height: 52rpx;
		width:100%;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 52rpx;
		text-align: center;
		color: #6E6E73;
		transform: scale(.83);
		font-size: 800;
	}
	.withdraw-message-container{
		width: 100%;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		font-family:PingFang SC;
		color:#afafaf;
		font-size:24rpx;
	}
	.message-main{
		display: flex;
		.user-avatar-container{
			width: 76rpx;
			height: 76rpx;
			margin: 0rpx 32rpx 0rpx 32rpx;
			border-radius: 10rpx;
			overflow: hidden;
			.user-avatar{
				width: 100%;
				height: 100%;
			}
		}
		.message-content-main{
			flex:1;
			display: flex;
			flex-direction: column;
			position: relative;
			.user-name{
				height: 56rpx;
				line-height: 56rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #909399;
				width: 300rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.message-content-container{
				display: flex;
				align-items: center;
				.message-content{
					position: relative;
					transition-duration: .3s;
					
					margin-top: 4rpx;
					max-width: 486rpx;
					// box-shadow: rgba(100, 100, 111, 0.2) 0rpx 7rpx 29rpx 0rpx;
					box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0rpx 4rpx 8rpx -2rpx;
					padding: 16rpx 32rpx 16rpx 32rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 800;
					// color: #1D1D1F;
					color:#333333;
					word-wrap:break-word;
					word-break: break-all;
					white-space: pre-wrap;
					// white-space-collapse: discard;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					&.img-msg{
						background-color: 	transparent !important;
						box-shadow:none !important;
					}
					/deep/ .u-image{
						width: 300rpx !important;
						// height: auto !important;
						border-radius: 10rpx !important;
					}
					.file-message-container{
						width: 370rpx;
						height: 106rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.file-info-wrapper{
							width: calc(100% - 64rpx);
							.file-name{
								height: 40rpx;
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 800;
								line-height: 40rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							.file-size{
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								height: 34rpx;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400;
								line-height: 34rpx;
								
							}
						}
						.file-icon-wrapper{
							width: 64rpx;
							height: 64rpx;
							.file-icon{
								width: 100%;
								height: 100%;
							}
						}
					}
					.voice-message-container{
						height: 46rpx;
						width: 200rpx;
						display: flex;
						align-items: center;
						// justify-content: center;
						.voice-icon{
							width: 32rpx;
							height: 32rpx;
							
						}
					}
					.location-message-container{
						height: 106rpx;
						width: 422rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.location-ifno-wrapper{
							width:338rpx;
							height: 74rpx;
							box-sizing: border-box;
							.location-info-name{
								height: 40rpx;
								width: 100%;
								font-family:PingFang SC;
								font-weight:700;
								font-size:28rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							.location-info-address{
								height: 34rpx;
								width: 100%;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								font-family:PingFang SC;
								// color:#afafaf;
								
								font-size:24rpx;
							}
						}
						.location-icon-wrapper{
							width: 64rpx;
							height:64rpx;
							position: relative;
							.icon-location{
								font-size: 64rpx;
								position: absolute;
								bottom: 10rpx;
								font-weight: 100;
							}
						}
					}
				}
				.video-message-container{
					border-radius: 10rpx;
					overflow: hidden;
					position: relative;
					&.colum{
						width: 230rpx;
						height: 415rpx;
					}
					&.row{
						width: 410rpx;
						height: 230rpx;
					}
					.video-duration-container{
						position: absolute;
						bottom: 0;
						width: 100%;
						height: 100rpx;
						background: linear-gradient(to top, #333,transparent);
						line-height: 150rpx;
						text-align: right;
						padding-right: 20rpx;
						color: #ffffff;
						font-size: 26rpx;
						box-sizing: border-box;
					}
					.video-play-icon-container{
						width: 70rpx;
						height: 70rpx;
						border: 2rpx #ffffff solid;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						border-radius: 100%;
						line-height: 70rpx;
						text-align: center;
						padding-left: 7rpx;
						padding-top: 5rpx;
						box-sizing: border-box;
						color: #ffffff;
					}
				}
				.message-stuaus{
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.file-upload-progress{

					}
					.loading{
						display: flex;
						align-items: center;
						.progress{
							font-size: 24rpx;
							color: #3c9cff;
							width: 70rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}
	&.current{
		.message-content{
			background-color: #398ade !important;
		}
	}
	&.sender{
		.message-main{
			flex-direction: row-reverse;
		}
		.message-content-main{
			align-items: flex-end;
		}
		.message-content{
			background-color: #B8DCFF;
			border-radius: 24rpx 0rpx 24rpx 24rpx !important;
		}
		.user-name{
			text-align: right !important;
		}
		.message-content-container{
			flex-direction: row-reverse;
		}
		.message-stuaus{
			margin-right: 30rpx;
		}
		.file-size{
			color:#1d1d1f;
		}
		.file-name{
			color: #4E4E4E;
		}
		.voice-icon{
			transform: rotate(0deg);
			margin-left: 20rpx;
		}
		.voice-message-container{
			flex-direction: row-reverse;
		}
		.location-message-container{
			flex-direction: row;
			.location-info-name{
				color:#666;
			}
			.location-info-address{
				color: #767a82;
			}
			.icon-location{
				color: #ecf5ff;
			}
		}
	}
	&.receiver{
		.message-main{
			 flex-direction: row;
		}
		.message-content-main{
			align-items: flex-start;
		}
		.message-content{
			background-color: #ffffff;
			border-radius: 0rpx 24rpx 24rpx 24rpx;
		}
		.user-name{
			text-align: left;
		}
		.message-content-container{
			flex-direction: row;
		}
		.message-stuaus{
			margin-left: 30rpx;
		}
		.file-name{
			// color: #1D1D1F;
			color: #333;
		}
		.file-size{
			color: #AFAFAF;
		}
		.voice-icon{
			transform: rotate(180deg);
			margin-right: 20rpx;
		}
		.voice-message-container{
			flex-direction: row;
		}
		.location-message-container{
			flex-direction: row;
			.location-info-name{
				color:#1d1d1f;
			}
			.location-info-address{
				color:#afafaf;
			}
			.icon-location{
				color: #298bf2;
			}
		}
	}
}